
import TextareaWithParamsV2 from '../../../components/TextareaWithParamsV2'
import { Select } from 'antd'

const InputCont = ({ info, sourceOptions, editData }) => {
  const handleAdd = () => {
    const newInputList = [...(info.inputList || [])]
    newInputList.push({ value: '' })
    editData({ inputList: newInputList })
  }

  const handleDelete = (index) => {
    const newInputList = [...info.inputList]
    newInputList.splice(index, 1)
    editData({ inputList: newInputList })
  }

  return (
    <div className="input-cont space-y-4">
      {info.inputList?.map((input, index) => (
        <div key={index} className="relative bg-gray-100 p-4 rounded-lg">
          <button 
            className="absolute right-2 top-2 p-1 text-red-500 hover:text-red-600" 
            onClick={() => handleDelete(index)}
          >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
              <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
            </svg>
          </button>
          <div className="grid grid-cols-[80px_1fr] gap-4 items-center mb-2">
            <div className="text-sm text-slate-600 pl-5">变量</div>
            <Select
              className="w-48"
              placeholder="选择引用变量"
              value={input.variable || undefined}
              onChange={(value) => {
                const newInputList = [...info.inputList]
                newInputList[index] = {
                  ...input,
                  variable: value,
                }
                editData({ inputList: newInputList })
              }}
              options={sourceOptions?.map(option => ({
                value: option.value,
                label: option.label,
                options: option.options
              }))}
              dropdownRender={(menu) => (
                <div className="bg-white rounded-lg shadow-lg">
                  {menu}
                </div>
              )}
            />
          </div>
          <div className="grid grid-cols-[80px_1fr] gap-4 items-center">
            <div className="text-sm text-slate-600 pl-5">值</div>
            <TextareaWithParamsV2
              value={input.value || ''}
              onChange={value => {
                const newInputList = [...info.inputList]
                newInputList[index] = { 
                  ...input, 
                  value,
                }
                editData({ inputList: newInputList })
              }}
              citeOptions={sourceOptions}
            />
          </div>
        </div>
      ))}
      <button 
        className="w-full py-2 border-2 border-dashed border-slate-300 text-slate-500 hover:border-slate-400 hover:text-slate-600 rounded-lg"
        onClick={handleAdd}
      >
        + 新增
      </button>
    </div>
  )
}

export default InputCont